/* font imports*/
@font-face {
  font-family: 'jelleebold';
  src: url("../fonts/jellee-roman-webfont.woff2") format('woff2'), url("../fonts/jellee-roman-webfont.woff") format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'balooregular';
  src: url("../fonts/baloo-regular-webfont.woff2") format('woff2'), url("../fonts/baloo-regular-webfont.woff") format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'league_spartanbold';
  src: url("../fonts/leaguespartan-bold-webfont.woff2") format('woff2'), url("../fonts/leaguespartan-bold-webfont.woff") format('woff');
  font-weight: normal;
  font-style: normal;
}
@body-bg: #dbe3eb;
@primary-font-small: 13px balooregular,'Microsoft YaHei';
@primary-font-big: 16px balooregular;
@secondary-font: 20px league_spartanbold,'Microsoft YaHei';
@primary-color: #322d9f;
@secondary-color: #449f97;

* {
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  overflow: hidden;
}

body {
  background: linear-gradient(to bottom right, #2c6b62, #473691);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #fff;
  font: @primary-font-small;
}
//播放器的大小、背景颜色、定位等信息
@player-bg: #000;
@player-w: 720px;
@player-h: 525px;
@content-middle-h: 83%;

.iconfont {
  //icon 居中
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: bold;
}
//歌词高亮

.highlight {
  color: #3effee;
  text-shadow: 0 0 10px #ded1fc;
}

.bg {
  width: @player-w;
  height: @player-h;
  border-radius: 20px;
  background: black;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0.4;
  z-index: -1;
}

.player {
  width: @player-w;
  height: @player-h;
  border-radius: 20px;
  padding: 40px 0 0;
  margin: 0;
  box-shadow: 0 0 10px #000;
  opacity: 0.8;
  position: relative;
  z-index: 0;

  .trackInfo {
    width: 44%;
    height: @content-middle-h;
    float: left;
    text-align: center;
    overflow: hidden;
    letter-spacing: 0.06em;

    .albumPic {
      width: 100%;
      height: 53%;
      padding: 3px;
      position: relative;

      .bottom,
      .cover,
      .mask,
      .top1,
      .top2 {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
      @bottom-diam: 200px;
      @cover-diam: @bottom-diam - 12px;
      @top-diam: @bottom-diam * 0.26;

      .bottom {
        width: @bottom-diam;
        height: @bottom-diam;
        border-radius: calc(@bottom-diam / 2);
        background-image: url("../image/bottom.png");
        background-size: cover;
        box-shadow: 0 0 35px rgba(49, 45, 160,.8);
        z-index: 1;
      }

      .cover {
        width: @cover-diam;
        height: @cover-diam;
        border-radius: 50%;
        /*   background-image: url("../image/cover.png"); */
        /* background-size: cover; */
        z-index: 2;
      }

      .top1 {
        width: @top-diam;
        height: @top-diam;
        border-radius: 50%;
        background-image: url("../image/top.png");
        background-size: cover;
        z-index: 3;
      }

      .top2 {
        width: @top-diam + 8px;
        height: @top-diam + 8px;
        border-radius: 50%;
        background: #1c1a55;
        opacity: 0.5;
        background-size: cover;
        z-index: 3;
      }

      .mask {
        width: @bottom-diam;
        height: @bottom-diam;
        border-radius: 50%;
        background: #2a1540;
        background-size: cover;
        opacity: 0.3;
        z-index: 4;
      }
    }

    .rotate {
      animation: rotator 15s infinite linear;
      -moz-animation: rotator 15s linear infinite;
      -ms-animation: rotator 15s linear infinite;
      -o-animation: rotator 15s linear infinite;
      -webkit-animation: rotator 15s linear infinite;
      animation-play-state: paused;
      -webkit-animation-play-state: paused;
      -moz-animation-play-state: paused;
      -o-animation-play-state: paused;
      -ms-animation-play-state: paused;
    }

    .running {
      animation-play-state: running;
      -webkit-animation-play-state: running;
      -moz-animation-play-state: running;
      -o-animation-play-state: running;
      -ms-animation-play-state: running;
    }
    @keyframes rotator {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }
    @-webkit-keyframes rotator {
      from {
        -webkit-transform: rotate(0deg);
      }

      to {
        -webkit-transform: rotate(360deg);
      }
    }
    @-moz-keyframes rotator {
      from {
        -moz-transform: rotate(0deg);
      }

      to {
        -moz-transform: rotate(360deg);
      }
    }
    @-o-keyframes rotator {
      from {
        -o-transform: rotate(0deg);
      }

      to {
        -o-transform: rotate(360deg);
      }
    }
    @-ms-keyframes rotator {
      from {
        -ms-transform: rotate(0deg);
      }

      to {
        -ms-transform: rotate(360deg);
      }
    }
    @info-width: 275px;

    .trackName {
      width: @info-width;
      height: 8%;
      margin: 0 20px;
      font-size: 20px;
      font-weight: bold;
      overflow: hidden;
    }

    .artist {
      width: @info-width;
      height: 7%;
      margin: 0 auto;
      font: @primary-font-big;
      font-weight: bold;
      color: darkgrey;
    }

    .lyrics {
      height: 32%;
      padding-top: 8px;
      overflow: hidden;

      .lyricsList {
        width: @info-width;
        margin: 0 auto;
        padding: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        li {
          height: 30px;
          display: inline-block;
          line-height: 15px;
          font-size: 13px;
        }
      }
    }
    //长文本横向滚动
    .lyrics li,
    .trackName p {
      white-space: nowrap;
      display: inline-block;
      min-width: @info-width;
    }

    .trackName p {
      animation: var(--duration) wordScroll linear infinite;
    }

    .lyrics li {
      animation: var(--duration) wordScroll linear 1 forwards;
    }
    @keyframes wordScroll {
      0%,
      20% {
        transform: translateX(0px);
      }

      100%,
      80% {
        transform: translateX(calc(-100% + 275px));
      }
    }
    @-webkit-keyframes wordScroll {
      0%,
      20% {
        -webkit-transform: translateX(0px);
      }

      100%,
      80% {
        -webkit-transform: translateX(calc(-100% + 275px));
      }
    }
    @-moz-keyframes wordScroll {
      0%,
      20% {
        -moz-transform: translateX(0px);
      }

      100%,
      80% {
        -moz-transform: translateX(calc(-100% + 275px));
      }
    }
    @-o-keyframes wordScroll {
      0%,
      20% {
        -o-transform: translateX(0px);
      }

      100%,
      80% {
        -o-transform: translateX(calc(-100% + 275px));
      }
    }
    @-ms-keyframes wordScroll {
      0%,
      20% {
        -ms-transform: translateX(0px);
      }

      100%,
      80% {
        -ms-transform: translateX(calc(-100% + 275px));
      }
    }
  }
  @number-font: 10px;

  .library {
    width: 56%;
    height: @content-middle-h;
    /* background: blue; */
    float: right;
    position: relative;

    .searchBar {
      position: absolute;
      top: 0;
      right: 0;
      width: 65%;
      height: 33px;
      background: @primary-color;
      border-radius: 20px 0 0 20px;
      z-index: 2;

      &:hover {
        box-shadow: 0 0 20px 5px #903eff;
      }

      .icon-chazhao {
        margin-left: 10px;
        width: 20px;
        height: 108%;
        /* border: 1px solid #fff; */
      }

      #seach-txt {
        background: none;
        border: none;
        outline: none;
        width: calc(100% - 33px);
        line-height: 33px;
        position: absolute;
        top: 1px;
        right: 0;
        //去掉默认填充样式
        height: 0;
        padding: 1.2em 0.5em;
        background-clip: content-box;
        color: #fff;

        &::first-line {
          color: #fff;
          letter-spacing: 1px;
        }
      }
    }

    .category {
      height: 43%;
      /* border: 1px solid yellow; */
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      font: @primary-font-big;
      color: #fff;

      & > div {
        cursor: pointer;
      }
      //共同属性
      .icon-pos {
        position: absolute;
        width: 30px;
        height: 30px;
      }

      .icon-gengduo-ver {
        .icon-pos();
        top: 12px;
        left: 5px;
        /* border: 1px solid #fff; */
      }

      .icon-cd,
      .icon-yinfu,
      .icon-yinyue {
        .icon-pos();
        bottom: 43px;
        right: 15px;
        font-size: 18px;
        font-weight: bold;
      }

      .categoryName {
        position: absolute;
        bottom: 15px;
        right: 18px;
        letter-spacing: 0.05em;
      }
      //category块共同属性
      .dynamic,
      .gentle,
      .recent {
        width: 30%;
        border-radius: 10px;
        position: relative;
      }

      .recent:hover {
        box-shadow: 0 0 20px 5px #903eff;
      }

      .dynamic:hover,
      .gentle:hover {
        box-shadow: 0 0 12px 3px #3effee;
      }

      .recent {
        height: 155px;
        /* border: 1px solid red; */
        background: @primary-color;
      }

      .dynamic,
      .gentle {
        height: 121px;
        /* border: 1px solid red; */
        background: @secondary-color;
      }
    }

    .listItem:first-child {
      margin-top: 0;
    }
    /*     .discoverContent > .listItem:first-child {
  margin: 13px 0;
} */
    .listItem {
      /* border: 1px solid blue; */
      padding-left: 6px;
      margin: 13px 0;
      display: flex;
      align-items: center;
      position: relative;
      cursor: pointer;

      li {
        list-style: none;
        /* border: 1px solid red; */
        margin-right: 10px;
        letter-spacing: 0.05em;
      }

      .icon-wave {
        width: 15px;
        height: 100%;
        margin-left: 1px;
        /* border: 1px solid yellow; */
        position: absolute;
        left: -1px;
      }

      .wave-display {
        background: url("../image/wave.gif") no-repeat 0 center;
        /* background: red; */
      }
      @songPic-d: 36px;

      .songPic {
        width: @songPic-d;
        height: @songPic-d;
        border-radius: 50%;
        margin: 0 15px;
        /* background: url("../image/lit.jpg"); */
        /* background-size: cover; */
      }

      .songPic-big {
        width: @songPic-d + 6px;
        height: @songPic-d + 6px;
      }

      .songInfo {
        line-height: 1;

        .songName {
          font-size: 16px;
          width: 230px;
          height: 18px;
          padding-top: 2px;
          margin-bottom: 3px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .songArtist {
          color: darkgrey;
        }
      }

      .songTime {
        /* border: 1px solid yellow; */
        margin-left: auto;
        padding: 10px;
        font-size: 13px;
      }
    }

    .discoverContainer {
      height: 57%;
      /* border: 1px solid red; */
      .title {
        margin-bottom: 15px;
        padding: 25px 0 0 10px;
        height: 55px;
        /* border: 1px solid red; */
        font: @secondary-font;
        letter-spacing: 1px;
      }

      .discoverContent {
        height: 170px;
        /* border: 1px solid red; */
      }
    }

    .dynamicContainer,
    .gentleContainer,
    .recentContainer,
    .searchContainer {
      width: 100%;
      height: 100%;
      position: absolute;
      text-decoration: none;
      top: 0;
      left: 0;
      display: none;
      z-index: 1;
      /* border: 1px solid red; */
      .dynamicContent,
      .gentleContent,
      .recentContent,
      .searchContent {
        /* height: calc(100% - 90px); */
        height: 290px;
        width: 100%;
        /* overflow: auto; */
        /* border: 1px solid red; */
      }

      .back-btn {
        margin-left: 5px;
        width: 40px;
        height: 40px;
        /* border: 1px solid red; */
        display: flex;
        align-items: center;
        justify-content: center;

        .back {
          width: 20px;
          height: 20px;
          border: 2px solid #fff;
          border-radius: 50%;
          /* font-size: 14px; */
          filter: opacity(50%);
        }
      }

      .title {
        padding: 15px 0 0 20px;
        margin-bottom: 15px;
        height: 50px;
        font: @secondary-font;
        letter-spacing: 1px;
      }
    }

    .loader {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      opacity: 0.5;
      animation: loading 1.3s infinite linear;
      position: absolute;
      top: -5px;
      /* -0.5w+0.5W */
      left: calc(-5px + 50%);
      display: none;
    }
    @dist-y: 218px;
    @ex-r: 4px;
    @move: 35px;
    @keyframes loading {
      0% {
        box-shadow: -@move @dist-y 0 @ex-r #fff, 0 @dist-y 0 0 #fff, @move @dist-y 0 -@ex-r #fff;
      }

      25% {
        box-shadow: -@move @dist-y 0 0 #fff, 0 @dist-y 0 -@ex-r #fff, @move @dist-y 0 0 #fff;
      }

      50% {
        box-shadow: -@move @dist-y 0 -@ex-r #fff, 0 @dist-y 0 0 #fff, @move @dist-y 0 @ex-r #fff;
      }

      75% {
        box-shadow: -@move @dist-y 0 0 #fff, 0 @dist-y 0 @ex-r #fff, @move @dist-y 0 0 #fff;
      }

      100% {
        box-shadow: -@move @dist-y 0 @ex-r #fff, 0 @dist-y 0 0 #fff, @move @dist-y 0 -@ex-r #fff;
      }
    }
    @-moz-keyframes loading {
      /* Firefox */
      0% {
        box-shadow: -@move @dist-y 0 @ex-r #fff, 0 @dist-y 0 0 #fff, @move @dist-y 0 -@ex-r #fff;
      }

      25% {
        box-shadow: -@move @dist-y 0 0 #fff, 0 @dist-y 0 -@ex-r #fff, @move @dist-y 0 0 #fff;
      }

      50% {
        box-shadow: -@move @dist-y 0 -@ex-r #fff, 0 @dist-y 0 0 #fff, @move @dist-y 0 @ex-r #fff;
      }

      75% {
        box-shadow: -@move @dist-y 0 0 #fff, 0 @dist-y 0 @ex-r #fff, @move @dist-y 0 0 #fff;
      }

      100% {
        box-shadow: -@move @dist-y 0 @ex-r #fff, 0 @dist-y 0 0 #fff, @move @dist-y 0 -@ex-r #fff;
      }
    }
    @-webkit-keyframes loading {
      /* Safari 和 Chrome */
      0% {
        box-shadow: -@move @dist-y 0 @ex-r #fff, 0 @dist-y 0 0 #fff, @move @dist-y 0 -@ex-r #fff;
      }

      25% {
        box-shadow: -@move @dist-y 0 0 #fff, 0 @dist-y 0 -@ex-r #fff, @move @dist-y 0 0 #fff;
      }

      50% {
        box-shadow: -@move @dist-y 0 -@ex-r #fff, 0 @dist-y 0 0 #fff, @move @dist-y 0 @ex-r #fff;
      }

      75% {
        box-shadow: -@move @dist-y 0 0 #fff, 0 @dist-y 0 @ex-r #fff, @move @dist-y 0 0 #fff;
      }

      100% {
        box-shadow: -@move @dist-y 0 @ex-r #fff, 0 @dist-y 0 0 #fff, @move @dist-y 0 -@ex-r #fff;
      }
    }
    @-o-keyframes loading {
      /* Opera */
      0% {
        box-shadow: -@move @dist-y 0 @ex-r #fff, 0 @dist-y 0 0 #fff, @move @dist-y 0 -@ex-r #fff;
      }

      25% {
        box-shadow: -@move @dist-y 0 0 #fff, 0 @dist-y 0 -@ex-r #fff, @move @dist-y 0 0 #fff;
      }

      50% {
        box-shadow: -@move @dist-y 0 -@ex-r #fff, 0 @dist-y 0 0 #fff, @move @dist-y 0 @ex-r #fff;
      }

      75% {
        box-shadow: -@move @dist-y 0 0 #fff, 0 @dist-y 0 @ex-r #fff, @move @dist-y 0 0 #fff;
      }

      100% {
        box-shadow: -@move @dist-y 0 @ex-r #fff, 0 @dist-y 0 0 #fff, @move @dist-y 0 -@ex-r #fff;
      }
    }
  }

  .myListContainer {
    width: 37%;
    height: @content-middle-h + 4%;
    border-radius: 5px 20px 0 5px;
    box-shadow: 0 0 10px #12202b;
    background: #1f3547;
    z-index: 3;
    position: absolute;
    top: 0;
    right: 0;
    display: none;

    .title {
      padding: 25px 0 0 10px;
      height: 55px;
      /* border: 1px solid red; */
      font: @secondary-font;
      letter-spacing: 1px;
    }

    .myListContent {
      height: calc(100% - 65px);
      margin-top: 10px;
      overflow: auto;
      display: none;
      /* border: 1px solid red; */
      .listItem {
        /* border: 1px solid red; */
        border-bottom: 1px solid lighten(#393939,3%);
        padding: 8px 0;
        margin: 0 15px;
        display: flex;
        /* justify-content: space-between; */
        align-items: center;
        position: relative;
        cursor: pointer;
        /* overflow-x: hidden; */
        li {
          list-style: none;
          /* border: 1px solid red; */
          margin-right: 10px;
          letter-spacing: 0.05em;
        }
        @songPic-d: 35px;

        .songPic {
          width: @songPic-d;
          height: @songPic-d;
          border-radius: 50%;
          /* margin: 0 15px; */
          /* background: url("../image/lit.jpg"); */
          /* background-size: cover; */
        }

        .songPic-big {
          width: @songPic-d + 6px;
          height: @songPic-d + 6px;
        }

        .songInfo {
          line-height: 1;

          .songName {
            font-size: 14px;
            width: 120px;
            padding-top: 2px;
            margin-bottom: 3px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            /* border: 1px solid red; */
          }

          .songArtist {
            /* color: darkgrey; */
            font-size: 11px;
          }
        }

        .songTime {
          /* border: 1px solid yellow; */
          margin-left: auto;
          /* padding: 10px; */
          font-size: 13px;
        }
      }
    }
  }

  .btnsBar,
  .controls,
  .progress {
    width: 100%;
  }

  .controls {
    height: calc(99% - @content-middle-h);
    /* height: 16%; */
    /* border: 1px solid green; */
    /* background: green; */
    position: absolute;
    bottom: 0;
    border-radius: 0 0 20px 20px;

    .progress {
      height: 25px;
      /* border: 1px solid yellow; */
      padding: 0;
      position: relative;

      .time {
        display: flex;
        justify-content: flex-end;
        position: relative;
        padding-right: 5px;
        font-size: @number-font;

        .current {
          margin-right: 15px;
        }

        .triangle {
          width: 0;
          height: 0;
          border-left: 3px solid transparent;
          border-right: 3px solid transparent;
          /* border-bottom: 10px solid #332ea0; */
          border-bottom: 10px solid #32c7ba;
          position: absolute;
          right: 32px;
          top: 13px;
        }
      }

      .progressBar {
        width: 100%;
        height: 6px;
        /* border-radius: 5px; */
        background: #907ac2;
        position: absolute;
        bottom: 0;
        cursor: pointer;

        .currentBar {
          width: 30%;
          height: 100%;
          background: #302d9f;
        }
        @btnBottom-radius: 9px;
        @btnTop-radius: 6px;
        //居中
        .centerPos {
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          margin: auto;
        }
        //进度点
        .progressBtn {
          position: absolute;
          top: -50%;
          width: @btnTop-radius*2;
          height: @btnTop-radius*2;
          border-radius: 50%;
          border: 4px solid #302d9f;
          background: #fff;
          z-index: 1;
          box-shadow: 0 0 10px 1px #903eff;

          &:hover {
            box-shadow: 0 0 5px 3px #903eff;
          }
        }
      }
    }
    @big-font-size: 28px;
    @small-font-size: 20px;
    @big-hover-size: 50px;
    @small-hover-size: 35px;

    .btnsBar {
      height: 60px;
      /* border: 1px solid red; */
      position: relative;
      display: flex;
      align-items: center;
      border-radius: 0 0 20px 20px;
      background-image: url("../image/colorful.png");
      background-size: cover;

      .iconfont {
        /* .icon(); */
        color: #fff;
        /* border: 1px solid black; */
        width: 50px;
        height: 50px;
        margin: 0 3px;

        &:first-child {
          margin-left: 20px;
        }

        &:nth-child(5) {
          margin-right: 20px;
        }

        &:nth-child(6) {
          /* margin-left: auto; */
          margin: 0 8px 0 auto;
        }
      }

      .play {
        border-radius: 25px;
        background-color: lighten(#4d2e9a,10%);
        /* background-color: #4d2e9a; */
        /* box-shadow: 0 0 70px #fff; */
      }

      .icon-bofang,
      .icon-shangyishou,
      .icon-xiayishou,
      .icon-zanting {
        font-size: 24px;
        /*         &:hover {
  font-size: @big-hover-size;
} */
      }

      .icon-danquxunhuan,
      .icon-jingyin,
      .icon-shunxu,
      .icon-yinliang {
        font-size: 18px;
      }

      .icon-liebiao {
        font-size: 16px;
      }

      .icon-addTrack {
        width: 35px;
        height: 39px;
        position: absolute;
        right: 15px;
        top: -35px;
        background-image: url("../image/music-icon.png");
        background-size: cover;
        display: none;
        z-index: 3;
      }
    }
  }
  /*   #canvas {
  width: 48%;
  height: 60px;
  position: absolute;
  left: 310px;
  bottom: 0;
  border: 1px solid black;
} */
}
//滚动条

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  width: 8px;
}
